<!-- 模板 -->
<template>
  <div class="finance">
       <div class="box">
            <div class="btn">
                <el-form  :inline="true"  :model="params" size="small"  label-width="80px" >
                    <el-form-item label="购买人:">
                        <el-input  v-model="params.name" placeholder="输入购买人"  clearable @clear="search" /> 
                    </el-form-item>
                    <el-form-item label="测量表:">
                        <!-- <el-input  v-model="params.name" placeholder="输入测量表"  clearable  />  -->
                        <el-select v-model="params.TableId" placeholder="请选择测评表" clearable filterable @change="search">
                            <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            </el-option>
                        </el-select> 
                    </el-form-item>
                    <el-form-item label="分销人:">
                        <el-input  v-model="params.distributionName" placeholder="输入分销人"  clearable @clear="search" /> 
                    </el-form-item>
                    <el-form-item label="下单时间:">
                        <el-date-picker
                            v-model="time"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd HH:mm"
                            @change="change1">
                        </el-date-picker>
                    </el-form-item>
                    <span style="margin-left:10px">
                        <el-button type="primary" icon="el-icon-search" size="small" @click="search">搜索</el-button>
                    </span>
                </el-form>
            </div>
          <el-card>
            <el-table :data="tableData" border style="width: 100%" >
                <el-table-column  label="序号" align="center" type="index" fixed="left"> </el-table-column>
                <el-table-column prop="name" label="购买人" align="center" min-width="180" > </el-table-column>
                <el-table-column prop="submitName" label="测量表" align="center" min-width="180" :show-overflow-tooltip="true"> </el-table-column>
                <el-table-column prop="payPrice" label="金额" align="center" min-width="120"> </el-table-column>
                <el-table-column prop="distributionName" label="分销人" align="center" min-width="180"> </el-table-column>
                <el-table-column prop="type" label="类型" align="center" min-width="150">
                    <template slot-scope="scope">
                        {{scope.row.type == 0 ?'正常':scope.row.type ==1?'分销':scope.row.type ==2?'合作商':''}}
                    </template>
                </el-table-column>
                <el-table-column prop="orderSn" label="订单编号" align="center" min-width="200" :show-overflow-tooltip="true"> </el-table-column>
                <el-table-column prop="paySn" label="支付编号" align="center" min-width="200" :show-overflow-tooltip="true"> </el-table-column>
                <el-table-column prop="payType" label="支付方式" align="center" min-width="150">
                    <template slot-scope="scope">
                        {{scope.row.payType == 1 ?'微信':scope.row.payType ==2?'余额':'——'}}
                    </template>
                </el-table-column>
                <el-table-column prop="payClass" label="支付类型" align="center" min-width="150">
                    <template slot-scope="scope">
                        {{scope.row.payClass == 1 ?'测量表':scope.row.payClass ==2?'课程报名':scope.row.payClass ==3?'代理商代理费支付':'——'}}
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="支付状态" align="center" min-width="150">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.status == 1">已支付</el-tag>
                        <el-tag type="danger" v-if="scope.row.status == 0">未支付</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="payTime" label="支付时间" align="center" min-width="180"> </el-table-column>
                <!-- <el-table-column  label="操作" align="center" fixed="right"  min-width="250">
                    <template slot-scope="scope">
                        <el-button @click="handleDeleteClick(scope.row)" type="primary" size="small" icon="el-icon-delete" plain>删 除</el-button>
                        <el-button @click="handleLookClick(scope.row)" type="primary" size="small" icon="el-icon-circle-close" plain>查 看</el-button>
                    </template>
                </el-table-column> -->
            </el-table>
            </el-card>
            <pagination
            v-show="newsTotal > 0"
            :total="newsTotal"
            :page.sync="params.pageNum"
            :limit.sync="params.pageSize"
            @pagination="getList"
        />
      </div>
  </div>
</template>

<script>
// import component from '@/components/*.vue'
import {getOrderList,getOrderDsc,} from '@/api/finance/index'
import { getList1, } from "@/api/table/table";

export default {
  name: '',
  data () {
    return {
        tableData:[],
        params:{
            pageNum: 1,
            pageSize: 10,
            createTime:'',
            payTime:'',
        },
        time:"",
        newsTotal:0,
        options:[],
        loading:false,
    }
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
      change1(val){
        //   console.log(val);
          if(val == null){
              this.params.createTime = ''
              this.params.payTime = ''
          }
      },
       // 搜索
    search(){
      if(this.time != null){
        this.params.createTime  = this.time[0]
        this.params.payTime = this.time[1]
      }
      this.$set(this.params, "pageNum", 1);
      this.paramsFlag = 0;
    //   this.tableData = []
      this.getList();
    },
     //   获取测量表
      getTableList() {
        getList1().then(res => {
            if(res.code == 200){
                this.options = res.rows
                // console.log(this.options);
            }
        });
    },
    // 获取资讯所有
    getList() {
      this.loading = true;
      getOrderList(this.params).then(res => {
            this.tableData = res.rows
            this.newsTotal = res.total;
            this.loading = false;
      });
    },
  },
  created () {
      this.getTableList()
      this.getList()
  },
  mounted () {}
}
</script>

<style rel="stylesheet/scss" lang="scss">
.finance{
    padding: 10px;
}
.box{
    margin: 10px;
    .btn{
        margin-top: 20px;
    }
}
</style>
